import React from 'react';
import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
import { getInvoice, deleteInvoice } from '../mock/data';

export default function InvoiceItem() {
  //获取url参数
  let params = useParams();
  //输入地址栏http://localhost:3000/invoices/2333
  // {invoiceId: '2333';}

  //获取列表中某一项
  let invoice = getInvoice(parseInt(params.invoiceId, 10));

  //返回一个设置的数组里，数组保存着一个对象，和对象的方法
  // let [searchParams, setSearchParams] = useSearchParams();
  //http://localhost:3000/invoice/1995?filter=3&name=zhangsan&age=18
  // console.log(searchParams);
  /**
   * URLSearchParams{
   *   append: fn,
   *   delete: fn,
   *   ...
   * }
   */

  // console.log(searchParams.get('filter'));
  // console.log(searchParams.get('name'));

  //返回一个方法
  let navigate = useNavigate();

  return (
    <div>
      <h5>渲染url参数对应的整个item数据：</h5>
      <main style={{ padding: '1rem' }}>
        <p>{invoice.name}</p>
        <p>{invoice.number}</p>
        <p>{invoice.due}</p>
        <button
          onClick={() => {
            deleteInvoice(invoice.number);
            navigate('/invoices');
          }}
        >
          delete
        </button>
      </main>
    </div>
  );
}
